<template>
  <div>
    <!-- 导航 -->
    <van-nav-bar sticky>
      <template #left>
        <img class="logo" src="../../assets/toutiao_logo.png" alt="" />
      </template>
      <template #right>
        <van-icon name="search" size="18" color="white" @click="searchFn"/>
      </template>
    </van-nav-bar>
    <!-- 频道 -->
    <van-tabs v-model="active" swipeable sticky :offset-top="1.22666667">
      <van-tab
        v-for="obj in arrList"
        :key="obj.id"
        :title="obj.name"
        :name="obj.id"
      >
        <ArticleList :channelId="active" @clicklist="clicklistFn"></ArticleList>
      </van-tab>
    </van-tabs>
    <van-icon
      name="plus"
      size="0.37333334rem"
      class="moreChannels"
      @click="changeArticleListFn"
    />

    <!-- 底部反馈面板 -->
    <van-action-sheet
      v-model="$store.state.homeArticleActionShow"
      :actions="actionArr"
      :cancel-text="cancelText"
      @select="onSelect"
      @cancel="cancelFn"
      get-container="body"
    />
    <van-popup v-model="changeArtileListshow" class="channel_edit_wrap">
      <channel-edit
        @closePE="closeFn"
        :articlelist="arrList"
        @addList="addArticleList"
        @removeList="removeListFn"
        v-model="active"
      >
      </channel-edit>
    </van-popup>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import {
  getlistAPI,
  dislikeArticleAPI,
  reportsArticleAPI,
  changechannelsAPI,
  removechannelsAPI
} from '@/api'
import { Toast } from 'vant'
import ArticleList from './ArticleList.vue'
import ChannelEdit from './channelEdit.vue'
export default {
  components: { ArticleList, ChannelEdit },
  data () {
    return {
      active: 0,
      arrList: [],
      newarrList: [],
      show: false,
      changeArtileListshow: false,
      actionArr: [], // 反馈面板数据
      cancelText: '取消'
    }
  },
  computed: {
    ...mapState(['firstActions', 'secondActions', 'actionArtId'])
  },
  async created () {
    const res = await getlistAPI()
    console.log(res)
    this.arrList = res.data.data.channels
    this.actionArr = this.firstActions
  },
  destroyed () {
    this.changeActionShowMutations(false)
  },
  methods: {
    ...mapMutations(['changeActionShowMutations']),
    // 点击反馈面板选项
    async onSelect (item) {
      // item就是actions选项
      if (item.name === '反馈垃圾内容') {
        // 切换actions数据源为二级反馈内容
        this.actionArr = this.secondActions
        this.cancelText = '返回'
      } else if (item.name === '不感兴趣') {
        // 调用接口
        const res = await dislikeArticleAPI(this.actionArtId)
        console.log(res)
        this.changeActionShowMutations(false) // 关闭反馈面板
      } else {
        const res = await reportsArticleAPI(this.actionArtId, item.value)
        console.log(res)
        Toast.success('举报成功')
        setTimeout(() => {
          this.actionArr = this.firstActions
        }, 500)

        this.changeActionShowMutations(false)
      }
    },
    // 取消点击事件
    cancelFn () {
      if (this.cancelText === '返回') {
        this.changeActionShowMutations(true) // 不能让弹出层关闭
        this.actionArr = this.firstActions // 切回一级反馈项目
        this.cancelText = '取消'
      }
    },
    // 弹出层是否显示
    changeArticleListFn () {
      console.log(1)
      this.changeArtileListshow = true
    },
    closeFn (bool) {
      // console.log(12)
      console.log(bool)
      this.changeArtileListshow = bool
    },
    async addArticleList (obj) {
      // console.log(obj)
      this.arrList.push(obj)
      this.newarrList = []
      this.arrList.forEach((obj, index) => {
        if (obj.id !== 0) {
          const newobj = { ...obj }
          delete newobj.name
          newobj.seq = index
          console.log(newobj)
          this.newarrList.push(newobj)
        }
      })
      console.log(this.newarrList)
      const res = await changechannelsAPI(this.newarrList)
      console.log(res)
    },
    async removeListFn (target) {
      // console.log(target)
      this.arrList.forEach((obj, index) => {
        if (obj.id === target) {
          this.arrList.splice(index, 1)
        }
      })
      const res = await removechannelsAPI(target)
      console.log(res)
    },
    searchFn () {
      this.$router.push('/search')
    },
    clicklistFn (article_id) {
      this.$router.push(`/article_detail?aid=${article_id}`)
    }
  }
}
</script>
<style scoped lang="less">
// /deep/ .van-nav-bar__left img{
//   width: 100px;
//   height: 30px;
// }
.logo {
  width: 100px;
  height: 30px;
}
// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}

.van-popup,
.popup-container {
  background-color: transparent;
  height: 100%;
  width: 100%;
  background-color: white;
}
.channel_edit_wrap {
  background-color: transparent;
  height: 100%;
  width: 100%;
  background-color: white;
}
</style>
